<template>
  <div class="right-content">
    <div class="permissManaTool">
      <el-input size="small" placeholder="请输入角色英文名" v-model="role.name">
        <template slot="prepend"></template>
      </el-input>
      <el-input size="small" v-model="role.nameZh" placeholder="请输入角色中文名"></el-input>
      <el-button style="width:6vw" type="primary" icon="el-icon-plus" @click="doAddRole">新增角色</el-button>
    </div>
    <div class="permissManaMain">
      <el-collapse v-model="activeName" accordion @change="change">
        <el-collapse-item :title="item.nameZh" :name="item.id" v-for="(item, index) in roles" :key="index">
         <el-card class="box-card" style="width: 96%">
            <div slot="header" class="clearfix">
              <span>可访问资源</span>
              <el-link type="danger" icon="el-icon-delete" style="float: right; padding: 3px 0" @click="doDeleteRole(item)"></el-link>
              <!-- <el-button style="float: right; padding: 3px 0" type="danger" icon="el-icon-delete"></el-button> -->
            </div>
            <div>
              <el-tree :data="allMenus" :props="defaultProps" show-checkbox :default-checked-keys="selectedMenus" node-key="id" ref="tree" :key="index"></el-tree>
              <div style="display:flex; justify-content:flex-end">
                <el-button style="width:5vw" @click="cancelUpdate()">取消修改</el-button>
                <el-button style="width:5vw" type="primary" @click="doUpdate(item.id,index)">确认修改</el-button>
              </div>
            </div>
          </el-card>
        </el-collapse-item>
      </el-collapse>
    </div>
  </div>
</template>

<script>
export default {
  name: 'PermissionManage',
  data() {
    return {
      role: {
        name: '',
        nameZh: ''
      },
      roles: [],
      allMenus: [],
      defaultProps: {
        children: 'children',
        label: 'name'
      },
      selectedMenus: [],
      activeName: -1
    }
  },
  mounted() {
    this.initRoles()
  },
  methods: {
    // 删除角色
    doDeleteRole(role) {
      this.$confirm('此操作将永久删除' + role.nameZh + '角色，是否继续', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        this.deleteRequest('/admin/roles/' + role.id).then((resp) => {
          if (resp) {
            this.$message.success(resp.msg)
            this.initRoles()
          }
        })
      }).catch(() => {
        this.$message.info('已取消删除')
      })
    },
    // 添加角色
    doAddRole() {
      if (this.role.name && this.role.nameZh) {
        this.postRequest('/admin/roles', this.role).then(resp => {
          if (resp) {
            this.$message.success(resp.msg)
            this.initRoles()
            this.role.name = ''
            this.role.nameZh = ''
          }
        })
      } else {
        this.$message.error('所有字段不能为空')
      }
    },
    // 取消更新
    cancelUpdate() {
      this.activeName = -1
    },
    // 更新角色菜单
    doUpdate(rid, index) {
      var tree = this.$refs.tree[index]
      var selectedKeys = tree.getCheckedKeys()
      var url = '/admin/?rid=' + rid
      selectedKeys.forEach(key => {
        url += '&mids=' + key
      })
      this.putRequest(url).then(resp => {
        if (resp) {
          this.$message.success(resp.msg)
          this.initRoles()
          this.activeName = -1
        }
      })
    },
    initRoles() {
      this.getRequest('/admin/roles').then(resp => {
        if (resp) {
          this.roles = resp.data
        }
      })
    },
    // 展开面板
    change(rid) {
      if (rid) {
        this.initAllMenus()
        this.initSelectedMenus(rid)
      }
    },
    // 根据角色id查询菜单id
    initSelectedMenus(rid) {
      this.getRequest('/admin/menuId/' + rid).then(resp => {
        if (resp) {
          this.selectedMenus = resp.data
        }
      })
    },
    // 展开后显示所有菜单
    initAllMenus() {
      this.getRequest('/sys/menu').then(resp => {
        if (resp) {
          this.allMenus = resp.data
        }
      })
    }
  }
}
</script>

<style>
.right-content > div {
  width: 96%;
  margin: 2vh auto;
  padding: 0px !important;
}
/**==================== 头部新增区域 start =====================*/
.permissManaTool {
  display: flex;
  justify-content: flex-start;
  margin-top: 1vh;
  padding-left: 1vw;
}
/** 输入框 */
.permissManaTool .el-input {
  width: 20%;
  height: 100%;
  margin-right: 1vw;
}
/** 按钮 */
.permissManaTool .el-button {
  height: 4vh;
}
/**==================== 头部新增区域 end =====================*/
/**==================== 树形控件区 start ===================== */
.el-collapse-item__header {
  font: 1vw '宋体';
}
.permissManaMain {
  height: 90%;
  overflow: hidden;
}
.permissManaMain .el-collapse {
  width: 100%;
  height: 99%;
  overflow-y: auto;
}
/* .permissManaMain .el-collapse-item {
  width: 100%;
} */
/**==================== 树形控件区 start ===================== */
</style>
